<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>理想80聊Web - 工具</title>
    <link href="./static/css/common.css" rel="stylesheet">
</head>

<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="road.html">路线</a></li>
                <li><a href="qa.html">问答</a></li>
                <li><a href="books.html">书籍</a></li>
                <li><a href="tools.html" class="active">工具</a></li>
                <li><a href="glossary.html">术语</a></li>
                <li><a href="links.html">友链</a></li>
            </ul>
        </nav>
    </header>

    <div id="container">

        <section id="title-area">
            <h1>理想80聊Web</h1>
            <p>君子生非异也，善假于物也。</p>
        </section>


        <main id="content">
            <section>
                <h2>电脑</h2>
                <p>如果有一台 Mac 就很 Nice。其实，只要是电脑就 OK。</p>
            </section>
            <section>
                <h2>浏览器</h2>
                <p>前端开发必备
                    <a href="https://www.google.cn/chrome/index.html" target="_blank" rel="noopener noreferrer">Chrome
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px"
                                viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
                                <path fill="currentColor"
                                    d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
                                </path>
                                <polygon fill="currentColor"
                                    points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
                                </polygon>
                            </svg>
                            <span class="sr-only">(opens new window)</span>
                        </span>
                    </a>。
                </p>
                <p>TODO Devtool</p>
            </section>
            <section>
                <h2>IDE</h2>
                <p>
                    集成开发环境，推荐
                    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener noreferrer">Visual Studio
                        Code
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px"
                                viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
                                <path fill="currentColor"
                                    d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
                                </path>
                                <polygon fill="currentColor"
                                    points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
                                </polygon>
                            </svg>
                            <span class="sr-only">(opens new window)</span>
                        </span>
                    </a>，
                    备胎
                    <a href="https://dcloud.io/hbuilderx.html" target="_blank" rel="noopener noreferrer">HBuilderX
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px"
                                viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
                                <path fill="currentColor"
                                    d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
                                </path>
                                <polygon fill="currentColor"
                                    points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
                                </polygon>
                            </svg>
                            <span class="sr-only">(opens new window)</span>
                        </span>
                    </a>。
                </p>
                <p>TODO 插件</p>
            </section>
            <section>
                <h2>版本控制</h2>
                <p>
                    <a href="https://git-scm.com/" target="_blank" rel="noopener noreferrer">Git
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px"
                                viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
                                <path fill="currentColor"
                                    d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
                                </path>
                                <polygon fill="currentColor"
                                    points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
                                </polygon>
                            </svg>
                            <span class="sr-only">(opens new window)</span>
                        </span>
                    </a>
                    和
                    <a href="https://github.com/" target="_blank" rel="noopener noreferrer">github
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px"
                                viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
                                <path fill="currentColor"
                                    d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z">
                                </path>
                                <polygon fill="currentColor"
                                    points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9">
                                </polygon>
                            </svg>
                            <span class="sr-only">(opens new window)</span>
                        </span>
                    </a>。
                </p>
            </section>

            <section>
                <h2>Markdown</h2>
                <p>TODO</p>
            </section>

            <section>
                <h2>SCSS</h2>
                <p>TODO</p>
            </section>

            <section>
                <h2>npm</h2>
                <p>TODO</p>
            </section>
            <section>
                <h2>Babel</h2>
                <p>TODO</p>
            </section>
            <section>
                <h2>webpack</h2>
                <p>TODO</p>
            </section>
        </main>

        <footer>
            <section>
                MIT Licensed | Copyright © <span id="year">2023</span>
                <a href="index.html">理想80聊Web</a>
                <a href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备16014488号-1</a>
            </section>
        </footer>

    </div>
</body>

</html>